import React from 'react';
import {Col, Divider, Input, InputNumber, Modal, Row, Select} from "antd";


interface OperateProps {
    visible: boolean;
    id: number;
    url: string;
    onCancel: () => void;
}


export const ImageOperate:React.FC<OperateProps> = ({visible, id, url, onCancel}) => {
    return <Modal
        width={'55vw'}
        maskClosable={false}
        visible={visible}
        title="图片处理"
        okText="保存"
        cancelText="取消"
        onCancel={onCancel}
    >
        <Input.Search addonBefore="原始链接" style={{width: '100%'}} enterButton="复制"  value={url} />
        <Divider>处理操作</Divider>
        <Row gutter={16}>
            <Col span={12}>
                <Row>
                    <Col span={4}>
                        <label style={{lineHeight: '33px'}}>处理类型：</label>
                    </Col>
                    <Col span={20}>
                        <Select style={{width: '100%'}}>
                            <Select.Option value={"auto"} >自动裁剪</Select.Option>
                        </Select>
                    </Col>
                </Row>
                <Row style={{marginTop: 10}}>
                    <Col span={4}>
                        <label style={{lineHeight: '33px'}}>缩略宽度：</label>
                    </Col>
                    <Col span={8}>
                        <InputNumber defaultValue={100} min={100} formatter={value => `${value}px`} style={{width: '100%'}} />
                    </Col>
                    <Col span={4}>
                        <label style={{lineHeight: '33px'}}>缩略高度：</label>
                    </Col>
                    <Col span={8}>
                        <InputNumber defaultValue={100} min={100} formatter={value => `${value}px`} style={{width: '100%'}} />
                    </Col>
                </Row>
            </Col>
            <Col span={12}>

            </Col>
        </Row>
    </Modal>
}